<template>
  <div>
    <div class="head">
      <img :src="logo" class="logo" alt="logo">
      <i class="nav-show-icon" @click="showOrHideNav" :title="isCollapse ? '展开导航' : '收起导航'"></i>
    </div>
    <div class="bodyMain">
      <div class="bodyL">
        <!--<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <el-radio-button :label="false">展开</el-radio-button>
          <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>-->
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#000000"
          text-color="#ffffff"
          active-text-color="#ffd04b"
          :collapse="isCollapse"
          :style="navHeight"
        >
          <div v-for="(item,section) in menuArray" :key="section">
            <el-submenu v-if="item.next" :index="section + ''">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span slot="title">{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  v-for="(sub,row) in item.child"
                  :key="row"
                  :index="section + '-' + row"
                  @click="menuClick"
                >{{ sub.name }}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item v-else :index="section + '-' + '0'" @click="menuClick">
              <i class="el-icon-menu"></i>
              <span slot="title">{{ item.child[0].name }}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </div>
      <div class="bodyR">
        <div class="bodyTip">
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            @tab-remove="removeTab"
            @tab-click="selectTab"
          >
            <el-tab-pane
              v-for="(item,index) in editableTabs"
              :key="index"
              :label="item.name"
              :name="index + ''"
              :closable="item.close !== false"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div class="bodyContent">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Welcome",
  data() {
    return {
      menuArray: [
        {
          name: "欢迎页",
          next: false, //是否有下一级
          child: [{ name: "欢迎页", router: "welcome", close: false}]
        },
        {
          name: "供应商注册",
          next: true,
          child: [
            { name: "供应商注册", router: "SupplierRegister" },
            { name: "供应商信息修改", router: "SupplierChange" },
            { name: "供应商注册信息查询", router: "SupplierQuery" },
            { name: "供应商资质到期列表", router: "SupplierList" }
          ]
        },
        {
          name: "采购订单协同",
          next: true,
          child: [
            { name: "采购订单列表", router: "Order" },
            { name: "生产进度汇报", router: "ProductionSchedule" },
            { name: "采购订单执行明细表", router: "OrderDetail" },
            { name: "生产进度分析报表", router: "Schedule" }
          ]
        },
        {
          name: "采购质检",
          next: true,
          child: [
            { name: "质检申请", router: "Quality" },
            { name: "质检情况分析报表", router: "QualityDetail" },
            { name: "仓库预约", router: "Warehouse" },
            { name: "仓库预约单查询", router: "WarehouseQuery" }
          ]
        },
        {
          name: "物流协同",
          next: true,
          child: [
            { name: "物流信息填报", router: "Logistics" },
            { name: "送货通知单", router: "Delivery" },
            { name: "采购入库单", router: "Purchase" }
          ]
        },
        {
          name: "财务协同",
          next: true,
          child: [{ name: "采购订单对账明细表报表", router: "Finance" }]
        }
      ], // 菜单数组
      isCollapse: false, // 展开收起
      editableTabsValue: "0",//绑定值，选中选项卡的 name
      editableTabs: [], // 右侧导航数组,
      navHeight: {height: '0px', 'overflow-y': 'auto'},
      logo: require('../assets/image/logo.png')
    };
  },
  methods: {
    // 菜单点击事件
    menuClick: function(e) {
      const indexArray = e.index.split("-");
      const first = indexArray[0];
      const second = indexArray[1];
      let menuItem = this.menuArray[first].child[second];

      let editableTabs = this.editableTabs;
      let existIndex = -1;
      editableTabs.forEach((item, index) => {
        if (menuItem.name === item.name) existIndex = index
      });
      if (existIndex === -1) {
        //不存在
        editableTabs.push(menuItem);
        this.editableTabs = editableTabs;
        this.editableTabsValue = editableTabs.length - 1 + '';
        this.$router.push(menuItem.router);
      } else {
        if (existIndex === parseInt(this.editableTabsValue)) return
        //存在
        this.$router.push(editableTabs[existIndex].router);
        this.editableTabsValue = existIndex + '';
      }
      this.saveSelectIndex(parseInt(this.editableTabsValue))
      this.saveSelectTables()
    },
    // 默认选中一个
    selectWelcome () {
      this.editableTabs.push(this.menuArray[0].child[0]);
      this.editableTabsValue = 0 + '';
      this.$router.push('welcome');
    },
    // 移除
    removeTab(index) {
      let editableTabs = this.editableTabs;
      editableTabs.splice(index,1);//移除
      if (this.editableTabsValue === index) {//移除的是当前选中的
        // 选中第一个
        index = 0;
        if (editableTabs.length === 0) {
          this.selectWelcome()
        } else {
          this.$router.push(editableTabs[index].router);
        }
      } else if (index < this.editableTabsValue) {//移除的是选中左边的
        index = this.editableTabsValue - 1;
      } else {//移除的是选中右边的
        index = this.editableTabsValue;
      }
      this.editableTabsValue = index + '';
      this.saveSelectIndex(index)
      this.saveSelectTables()
    },
    // 选中
    selectTab(target) {
      if (this.$route.path.substr(1) === this.editableTabs[target.index].router)
        return
      this.saveSelectIndex(target.index)
      this.$router.push(this.editableTabs[target.index].router);
    },
    // 存储已选择的项
    saveSelectIndex(index) {
      this.$request.storage('select-table-index', index)
    },
    // 存储已在头部显示的导航
    saveSelectTables () {
      this.$request.storage('select-tables', this.editableTabs)
    },
    // 导航的展开和收起
    showOrHideNav () {
      this.isCollapse = !this.isCollapse
    }
  },
  mounted () {
    let htmlHeight = document.getElementsByTagName('html')[0].clientHeight
    this.navHeight.height = (htmlHeight - 146) + 'px'
    // 显示已存储的导航
    let selectTables = this.$request.storage('select-tables')
    let selectTableIndex = this.$request.storage('select-table-index')
    if (selectTables !== '') {
      this.editableTabs = selectTables
      this.editableTabsValue = selectTableIndex + ''
      if (this.$route.path === '/') {
        this.$router.push(this.editableTabs[selectTableIndex].router)
      }
    } else {
      this.selectWelcome()
      this.saveSelectTables()
      this.saveSelectIndex(0)
    }
    // let uri = this.$route.path
    // for (let index in this.menuArray) {
    //   let child = this.menuArray[index].child
    //   for (let i in this.menuArray[index].child) {
    //     if (child[i].router === uri.substr(1)) {
    //       this.selectWelcome(child[i])
    //     }
    //   }
    // }
  }
};
</script>

<style scoped="scoped" lang="scss">
.head {
  /*background: #d1dbe5;*/
  background: #222222;
  height: 45px;
  line-height: 45px;
  margin-bottom: -1px;
  z-index: 2;
  .logo {
    height: 45px;
    margin-left: 15px;
  }
  .nav-show-icon {
    display: block;
    width: 45px;
    height: 45px;
    position: absolute;
    left: 220px;
    top: 0;
    background: url("../assets/image/icons/icon_109.png") no-repeat 50% 50%;
    background-size: 23px auto;
    cursor: pointer;
  }
}
.bodyMain {
  display: flex;
}
.bodyR {
  flex: 1;
  margin-left: 20px;
  overflow: hidden;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
  min-height: 400px;
}
.el-menu--collapse span{
  display: none;
}

</style>
